<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 顶部 -->
      <el-row :gutter="20">
        <!-- 搜索栏 -->
        <el-col :span="8">
          <el-input
            v-model="queryList.useInput"
            placeholder="请输入内容"
            clearable
            @clear="getAllUserByVague()"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getAllUserByVague()"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="dialogFormVisible = true"
            >添加用户</el-button
          >
        </el-col>
      </el-row>
      <!-- 数据框 -->
      <el-table :data="userList.list" border style="width: 100%" stripe>
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="password" label="密码"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="role" label="角色"> </el-table-column>
        <el-table-column prop="'state'" label="状态">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <!-- 滑块 -->
            <el-switch
              v-model="scope.row.state"
              @change="updateState(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="medium"
              @click="getUpdateUser(scope.row.id)"
            ></el-button>
            <!-- 删除 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="medium"
              @click="deleteUser(scope.row.id)"
            ></el-button>
            <!-- 权限 -->
            <el-button
              type="warning"
              class="iconfont icon-quanxian"
              size="medium"
              @click="getUpdateRole(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryList.currentPage"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="queryList.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="userList.total"
      >
      </el-pagination>
    </el-card>

    <!-- 用户添加Dialog对话框 -->
    <el-dialog
      title="添加用户"
      :visible.sync="dialogFormVisible"
      width="30%"
      @close="dialogColse()"
    >
      <el-form :model="userFrom" :rules="rules" ref="insertUserRef">
        <!-- 用户名 -->
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input
            v-model="userFrom.username"
            autocomplete="off"
            placeholder="请输入用户名"
          >
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            v-model="userFrom.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input
            v-model="userFrom.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUserForm()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 用户修改Dialog对话框 -->
    <el-dialog
      title="修改用户"
      :visible.sync="dialogUpdateFormVisible"
      width="30%"
      @close="dialogUpDateColse()"
    >
      <el-form :model="updateUser" :rules="rules" ref="updateUserRef">
        <!-- 用户名 -->
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input
            v-model="updateUser.username"
            autocomplete="off"
            placeholder="请输入用户名"
            :disabled="true"
          >
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            v-model="updateUser.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
          <el-input
            v-model="updateUser.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUpdateUser()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 用户权限修改Dialog对话框 -->
    <el-dialog title="权限设置" :visible.sync="dialogSetFormVisible" @close="dialogRoleClose()" width="30%">
      <el-form :model="roles" ref="settingsRole">
        <el-form-item label="用户角色" :label-width="formLabelWidth">
          <el-select  v-model="roles.role">
            <el-option label="超级管理员" value="超级管理员"></el-option>
            <el-option label="普通管理员" value="普通管理员"></el-option>
            <el-option label="普通用户" value="普通用户"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSetFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateRole()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryList: {
        useInput: "",
        pageSize: 3,
        currentPage: 1,
      },
      userList: [],
      dialogFormVisible: false,
      dialogUpdateFormVisible: false,
      dialogSetFormVisible: false,
      formLabelWidth: "120px",
      userFrom: {
        username: "",
        password: "",
        email: "",
      },
      updateUser: {
        username: "",
        password: "",
        email: "",
      },
      roles: {
        role: "",
      },
      rules: {
        username: [
          { required: true, message: "用户名为必填项", trigger: "blur" },
          { min: 5, max: 12, message: "长度在 5 到 12个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码为必填项", trigger: "blur" },
          { min: 5, max: 10, message: "长度在 5 到 10个字符", trigger: "blur" },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,10}$/,
            message: "必须同时包含字母和数字",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    getAllUserByVague() {
      console.log(this.queryList);
      this.$http.post("vagueSelectUser", this.queryList).then((response) => {
        console.log(response.data);
        if (response.data.flag == 0) {
          this.userList = [];
        } else {
          this.userList = response.data.data.user;
        }
      });
    },
    // getAllUser() {
    //   this.$http.post("AllUser").then((response) => {
    //     console.log(response.data);
    //     this.userList = response.data.data.user;
    //   });
    // },
    handleSizeChange(val) {
      this.queryList.pageSize = val;
      window.sessionStorage.setItem("pageSize", val);
      this.getAllUserByVague();
      console.log(val);
    },
    handleCurrentChange(val) {
      this.queryList.currentPage = val;
      window.sessionStorage.setItem("currentPage", val);
      this.getAllUserByVague();
    },
    updateState(val) {
      this.$http.post("updateState", val).then((response) => {
        if (response.data.flag == 1) {
          this.$message.success(response.data.msg);
        } else {
          this.$message.error(response.data.msg);
        }
      });
    },
    dialogColse() {
      this.$refs.insertUserRef.resetFields();
    },
    saveUserForm() {
      this.$refs.insertUserRef.validate((valid) => {
        if (valid == false) {
          alert("请先填写完整！");
          return;
        } else {
          this.dialogFormVisible = false;
          this.$http.post("insertUser", this.userFrom).then((response) => {
            console.log(response.data);
            if (response.data.flag == 0) {
              this.$message.error(response.data.msg);
            } else {
              this.$message.success(response.data.msg);
              this.getAllUserByVague();
            }
          });
        }
      });
    },
    async deleteUser(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除用户，是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult != "confirm") {
        return this.$message.info("已取消删除");
      }
      this.$http.delete("deleteUser/" + id).then((response) => {
        console.log(response.data);
        if (response.data.flag == 0) {
          this.$message.error(response.data.msg);
        } else {
          this.$message.success(response.data.msg);
          this.getAllUserByVague();
        }
      });
    },
    getUpdateUser(id) {
      this.dialogUpdateFormVisible = true;
      this.$http.get("getUpdateUser/" + id).then((response) => {
        this.updateUser = response.data.data.user;
      });
    },
    dialogUpDateColse() {
      this.$refs.updateUserRef.resetFields();
    },
    saveUpdateUser() {
      this.$http.put("updateUser", this.updateUser).then((response) => {
        console.log(response.data);
        if (response.data.flag == 0) {
          this.$message.error(response.data.msg);
        } else {
          this.$message.success(response.data.msg);
          this.dialogUpdateFormVisible = false;
          this.getAllUserByVague();
        }
      });
    },
    dialogRoleClose(){
      this.$refs.settingsRole.resetFields();
    },
    getUpdateRole(id){
      this.dialogSetFormVisible=true;
      this.$http.get("getUpdateRole/"+id).then(
        response=>{
          console.log(response.data);
          this.roles=response.data.data.user;
        }
      )
      console.log(id);
    },
    updateRole(){
      this.$http.put("updateRole/",this.roles).then(
        response=>{
          if (response.data.flag == 0) {
          this.$message.error(response.data.msg);
        } else {
          this.$message.success(response.data.msg);
          this.dialogSetFormVisible = false;
          this.getAllUserByVague();
        }
        }
      )
      
    }
  },
  created() {
    const sessionPage = window.sessionStorage.getItem("pageSize");
    const sessionCur = window.sessionStorage.getItem("currentPage");
    if (sessionPage != null) {
      this.queryList.pageSize = parseInt(sessionPage);
    }
    if (sessionCur != null) {
      this.queryList.currentPage = parseInt(sessionCur);
    }
    this.getAllUserByVague();
  },
  
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 20px;
}
.el-table {
  padding-bottom: 20px;
}
</style>